<template>
    <div class="wrapper">
      <header>
        <i class="fa fa-angle-left" @click="goBack"></i>
        <p>选择体检日期</p>
        <div></div>
      </header>
      <div class="top-ban"></div>
  
      <section>
        <div class="date-box">
          <i class="fa fa-caret-left" @click="prevMonth"></i>
          <p> {{ currentYear }}年{{ currentMonth+1 }}月</p>
          <i class="fa fa-caret-right" @click="nextMonth"></i>
        </div>
        <table>
          <tr>
            <!-- 星期 -->
            <th v-for="day in weekDays" :key="day">{{ day }}</th>
          </tr>
        </table>
        <ul>
          <li v-for="(day, index) in daysInMonth" :key="index">
            <!-- 日期 -->
            <p :class="[day.class, { 'pselect': day.isSelected }]" @click="selectDay(day.date)">
              {{ day.date.getDate() }}
            </p>
            <!-- 预约数 -->
            <p v-if="day.remaining">{{ day.remaining }}</p>
          </li>
        </ul>
      </section>
  
      <div class="bottom-btn">
        <div></div>
        <div @click="goToConfirmOrder">下一步</div>
      </div>
      
      <div class="bottom-ban"></div>
      <Footer />
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from 'element-plus';
import { ref, computed, onMounted } from 'vue';
import {formatDate} from '@/utils/date';
  const router = useRouter();
  const route = useRoute()
  const currentDate = new Date();
  const selectedDate = ref();
  const today=ref(currentDate.getDate());
  const thisMonth=ref(currentDate.getMonth());
  const currentYear = ref(currentDate.getFullYear());
  const currentMonth = ref(currentDate.getMonth());
  const lastDay = currentDate/ (1000 * 60 * 60 * 24)+30;
  //储存30天后的今天
  
  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
  
  const daysInMonth = computed(() => {
    const date = new Date(currentYear.value, currentMonth.value, 1);
    const days = [];
    let monthStartDay = date.getDay();
    let monthEndDay = new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
  
    // 打印上个月剩余天数
    for (let i = monthStartDay; i > 0; i--) {
      days.push({ date: new Date(currentYear.value, currentMonth.value, 1 - i), class: 'fontcolor' });
    }

  
    // 打印本月天数
    for (let i = 1; i <= monthEndDay; i++) {
        const currentDate = new Date(currentYear.value, currentMonth.value, i);
        const remaining = "余300"
        //当月从今天之前的日期禁止选择
        //日期距离今天超过30天
        if(i<today.value+1&&thisMonth.value===currentMonth.value){
            days.push({ date:currentDate,  remaining:'余0', isSelected:false });
        }
        else {
            days.push({ date:currentDate, class: 'fontcolor', remaining, 
            isSelected: selectedDate.value?.getTime() === currentDate.getTime() });
            // days.push({ date:currentDate, class: 'fontcolor', remaining, isSelected: selectedDate.value?.getTime() === date.getTime() });
        }
    }
  
    const totalDays = days.length;
    const daysToAdd = (7 - (totalDays % 7)) % 7;
    // 打印下个月天数
    for (let i = 1; i <= daysToAdd; i++) {
      days.push({ date: new Date(currentYear.value, currentMonth.value + 1, i), class: 'fontcolor' });
    }
  
    return days;
  });
  
  function prevMonth() {
    if (currentMonth.value === 0) {
      currentMonth.value = 11;
      currentYear.value--;
    } else {
      currentMonth.value--;
    }
  }
  
  function nextMonth() {
    if (currentMonth.value === 11) {
      currentMonth.value = 0;
      currentYear.value++;
    } else {
      currentMonth.value++;
    }
  }
  
  function selectDay(date) {
    //判断距离今天是否超过30天，超过30天则无法预约
    const diffDays = Math.abs(date - currentDate) / (1000 * 60 * 60 * 24);
    if (diffDays > 30) {
      return;
    }
    selectedDate.value = date;
  }
  
//   function getRemaining(date) {
//     return Math.floor(Math.random() * 200) + 56;
//   }
  
  function goBack() {
    history.go(-1);
  }
  
  const smId=ref(route.query.smId)
  const hpId=ref(route.query.hpId)
  function goToConfirmOrder() {
    if (selectedDate.value!=null) {
       const date = formatDate(selectedDate.value)
       router.push({name:'confirmorder', query: {  smId: smId.value,date:date,hpId:hpId.value } });
    } else {    
      ElMessage.warning('请选择预约日期')
    }
  }

//   function formatDate(date) {
//   const year = date.getFullYear();
//   const month = String(date.getMonth() + 1).padStart(2, '0');
//   const day = String(date.getDate()).padStart(2, '0');
//   return `${year}-${month}-${day}`;
// }

function defaultSelectDay(){
    const tomorrow = new Date(currentDate);
    tomorrow.setDate(currentDate.getDate() + 1);
    selectDay(tomorrow)
  }
//   defaultSelectDay()
  </script>
  
  <style scoped>
  /*********************** 总容器 ***********************/
  .wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
  }
  
  /*********************** header ***********************/
  header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;
  
    position: fixed;
    left: 0;
    top: 0;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    box-sizing: border-box;
    padding: 0 3.6vw;
  }
  header .fa {
    font-size: 8vw;
  }
  
  /*********************** common样式 ***********************/
  .top-ban {
    width: 100%;
    height: 15.7vw;
  }
  .bottom-ban {
    width: 100%;
    height: 14.2vw;
  }
  
  /*********************** section ***********************/
  section {
    width: 82vw;
    margin: 0 auto;
    margin-top: 12vw;
  }
  section .date-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    font-weight: 600;
  }
  section .date-box p {
    color: #000;
  }
  section .date-box i {
    color: #999;
    user-select: none;
    cursor: pointer;
  }
  section table {
    width: 100%;
    font-size: 3.8vw;
  }
  section table tr th {
    text-align: center;
    font-weight: 600;
    line-height: 12vw;
  }
  
  section ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  section ul li {
    width: 14.28%;
    height: 12vw;
    font-weight: 600;
    color: #999;
  }
  section ul li p:first-child {
    width: 6vw;
    height: 6vw;
    margin: 0 auto;
    border-radius: 3vw;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    font-size: 4.2vw;
  
    user-select: none;
    cursor: pointer;
  }
  section ul li p:last-child {
    font-size: 3vw;
    font-weight: 300;
    text-align: center;
    user-select: none;
  }
  
  .fontcolor {
    color: #333;
  }
  
  .pselect {
    background-color: #FB902B;
    color: #FFF;
  }
  
  /*********************** bottom-btn ***********************/
  .bottom-btn {
    width: 100%;
    height: 12vw;
    background-color: #FFF;
  
    position: fixed;
    left: 0;
    bottom: 14.2vw;
  
    display: flex;
  }
  .bottom-btn div:first-child {
    flex: 2;
  }
  .bottom-btn div:last-child {
    flex: 1;
    background-color: #117C94;
    text-align: center;
    line-height: 12vw;
    font-size: 5vw;
    color: #FFF;
  
    user-select: none;
    cursor: pointer;
  }
  </style>